<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
		<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
		<!-- <base href="https://webapi.amap.com/ui/1.1/ui/misc/MarkerList/examples/" /> -->
		<link rel="stylesheet" href="css/style.css" />
		<style>
			html,
			body,
			#container {
				width: 100%;
				height: 100%;
				margin: 0;
			}
			.la{    position: relative;    left: -37px;    top:55px;    background: rgba(255,255,255,0.6);    display: block;    white-space: nowrap;    width: 100px; overflow: hidden; white-space: nowrap;text-overflow: ellipsis;       line-height: 2.2;    color: blue; font-weight: bold;    border: 1px solid blue;    border-radius: 3px;}
			body {background: none;}
			.top{position: relative;z-index: 999; background: url(img/topbg.png) no-repeat #000; z-index: 999;background-size:100% 100%}
		</style>
		<title>尚尚曝付数据中心</title>

		<!-- <script src="http://fanbinkeji.com/js/jquery.js"></script> -->
	</head>

	<body>
	    <div class="back" id="back">
	        <a href="javascript:history.go(-1);">
	            <img src="img/back.png" alt="" />
	        </a>
	    </div>
		<div class="top"><h2>尚尚曝付数据中心</h2></div>
		<div class="home"><a href="index.html"><img src="img/home.png" alt="" /></a> <a href="detail.html">数据模式</a></div>
		<div id="container"></div>
		<script src="https://cache.amap.com/lbs/static/es5.min.js"></script>
		<script src="https://a.amap.com/Loca/static/mock/adcodes.js"></script>
		<script	src="https://webapi.amap.com/maps?v=2.0&key=d2b8f27007657abe5ee153f475c6d70a&plugin=AMap.Scale,AMap.ToolBar"></script>
		<script src="https://webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/config.js"></script>
		<script>
		    document.getElementById('back').style.display = 'none';
			var baseurl = getBaseUrl();
			var h = window.innerHeight
			var gao=h-94
			// console.log(gao)
			var element = document.getElementById("container");
			element.style.height = gao+'px';
			let adCode = 130000;
			let depth = 1;
			let z = 7.3
			let c = [116.262976,38.612679]			
			let map = new AMap.Map("container", {
				zoom: z,
				resizeEnable: true,
				center: c,
				pitch: 0,				
				mapStyle: "amap://styles/darkblue",
				pitch: 50, 
				viewMode: '3D', 
				rotateEnable: true, 
				pitchEnable: true, 			 
				rotation: -10, 				
			});

			// 创建省份图层
			let disProvince;
			function initPro(code, dep) {
				dep = typeof dep == 'undefined' ? 2 : dep;
				adCode = code;
				depth = dep;
				// console.log(code)
				disProvince && disProvince.setMap(null);
				disProvince = new AMap.DistrictLayer.Province({
					zIndex: 80,
					adcode: [code],
					depth: dep,
					styles: {
						'fill': function(properties) {
							var adcode = properties.adcode;
							return getColorByAdcode(adcode);
						},
						'province-stroke': 'cornflowerblue',
						'city-stroke': 'rgba(0,0,0,0.5)', // 中国地级市边界
						'county-stroke': 'rgba(255,255,255,0.5)' // 中国区县边界
					}
				});
				disProvince.setMap(map);
			}
			// 颜色辅助方法
			let colors = [];
			let getColorByAdcode = function(adcode) {
				if (!colors[adcode]) {
					var gb = Math.random()*256;
					var gb1=Math.random()*250;
					var gb2=Math.random()*255;
					colors[adcode] = 'rgba(' + gb + ','+gb2+','  +gb1+',0.5)';
					// console..log(colors[adcode])
				}
				return colors[adcode];
			};
			initPro(adCode, depth);			
			AMapUI.loadUI(['misc/MarkerList', 'overlay/SimpleMarker'],
				function(MarkerList, SimpleMarker) {
					var markerList = new MarkerList({
						map: map,
						autoSetFitView: false,
						markerEvents: ['click', 'mouseover', 'mouseout'],
						getPosition: function(dataItem) {
							return dataItem.position;
						},
						getMarker: function(dataItem, context, recycledMarker) {
							return new SimpleMarker({
							    containerClassNames: 'my-marker',
							    iconStyle: 'http://fanbinkeji.com/marker.png',
								offset: new AMap.Pixel(-15, -45),
							    iconLabel: {
							        innerHTML: '<p class="la">'+dataItem.desc+'</p>', //设置文字内容
							        style: {
							        color: '#fff' //设置文字颜色
									}
								},
							});

							//返回一个新的Marker
							return new AMap.Marker({
								label: label
							});
						},
					});						
					markerList.on('markerClick ',
						function(event, record) {
							console.log(record,adCode)
							if(adCode!=130000){
							    console.log(444444)
								// window.open('detail.html?id='+record.data.id);
								location.href='detail.html?id='+record.data.id
								markerList.render(data);
								map.setFitView()
								
							}
							else{
							 //   document.getElementById('back').style.display = 'block';
								adCode = record.data.c
								depth = 2
								initPro(adCode, depth);
								axios(baseurl+"index.bigData/indexBigDataCity", {
									method: "POST",
									data: {'c_code':adCode,'position':record.data.position},
								}).then(res => {
									if(res.data.code == 1){
										data = res.data.data;
										//展示该数据
										markerList.render(data);
										map.setFitView()
									}else{
										console.log(res.data.msg);
									}
								})
							}
						}
					);

					axios(baseurl+"index.bigData/indexBigDataStatistics", {
						method: "POST",
					}).then(res => {
						if(res.data.code == 1){
							let data = res.data.data;
							//展示该数据
							markerList.render(data);
						}else{
							console.log(res.data.msg);
						}
					})
				});
		</script>
	</body>
</html>